{% extends "based/based.html" %}
{% block title %}{{_("主题静态文件")}}-{% endblock %}
{% block content %}
<data id="type" content="{{data.type}}"></data>
<data id="page" content="{{data.page}}"></data>
<data id="keyword" content="{{data.keyword}}"></data>

<div id="app">
    <div class="row">
        <div class="col-xs-12">
            <div class="panel">
                <header class="panel-heading">
                    <i class="fa fa-html5"></i>
                    <strong>
                        {{_("页面编辑")}}(<span class="osr-color-success">{{_("结果")}}{[files.data_total]}</span>)
                    </strong>
                </header>
                <div class="panel-body table-responsive">
                    <div class="box-tools form-inline">
                        <div class="input-group pull-left">
                            <select class="form-control osr-form-control input-sm" @change="switch_type($event.target.value)">
                                 <option  v-for="t,k in type_list" v-if="t==type" selected = "selected" :value ="t">{[k]}</option>
                                <option v-for="t,k in type_list" v-if="t!=type" :value ="t">{[k]}</option>
                            </select>
                        </div>

                        <div class="input-group pull-right">

                            <input type="text" v-model="keyword" class="form-control osr-input input-sm" style="width: 150px;" placeholder="{{_('搜索')}}">
                            <div class="btn-group">
                                <button v-on:click="get_files(1,keyword)" class="btn btn-sm btn-default osr-btn">
                                    <i class="fa fa-search"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                    <br><br>
                    <div class="btn-group-sm">

                         <a :href="'/osr-admin/theme-setting/file/add-page?from_type='+type+'&from_page='+page" type="button"
                             class="btn osr-btn btn-sm btn-info">
                              <i class="fa fa-plus"></i> {{_("添加页面")}}
                          </a>
                    </div>
                    <br>
                    <ul class="list-group">
                        <li class="list-group-item" v-for="file in files.datas">
                        <p>
                            <i class="fa fa-file-code-o"></i> {[file.name]}
                            <span v-if="file.is_custom_page" style="color:#f37b1d">({{_("自添加页面)")}}</span>
                        </p>

                         <p style="color:#8e9294">
                             <i class="fa fa-folder-o"></i> {[file.relative_path]}
                         </p>

                        <div class="btn-group-sm">
                            <a class="btn osr-btn btn-info" :href="'/osr-admin/theme-setting/file/edit?filename='+file.name+'&path='+file.relative_path+'&from_type='+type+'&from_page='+page" >
                                <i class="fa fa-edit"></i> {{_("编辑")}}
                            </a>
                             <a  class="btn osr-btn btn-danger" v-on:click="warning_modal(null, 'del_file', file.relative_path, file.name)"
                                 v-if="file.is_custom_page">
                                <i class="fa fa-trash-o"></i> {{_("删除")}}
                             </a>

                        </div>
                        </li>
                    </ul>
                </div>
                <!-- 页面导航-->
            <div class="text-center hidden-md-down">
                <ul class="pagination">
                <li v-if="pages.last < pages.current_page && pages.last>0">
                        <a v-on:click="get_files(pages.last, keyword)">«</a>
                    </li>
                    <li v-else class="disabled">
                        <a>«</a>
                    </li>

                    <li v-for="page in pages.last_show" >
                        <a v-if="page!='...'" v-on:click="get_files(page, keyword)">{[page]}</a>
                        <a v-else href="#">...</a>
                    </li>

                    <li class="active">
                        <a v-on:click="get_files(pages.current_page, keyword)">{[pages.current_page]}</a>
                    </li>

                   <li v-for="page in pages.next_show" >
                        <a v-if="page!='...'" v-on:click="get_files(page, keyword)" >{[page]}</a>
                        <a v-else href="#">...</a>
                   </li>

                   <li v-if="pages.next > pages.current_page && pages.next<=pages.page_total">
                        <a v-on:click="get_files(pages.next, keyword)">»</a>
                    </li>
                    <li v-else class="disabled">
                        <a>»</a>
                    </li>
                </ul>
           </div>
            <!-- //页面导航-->
            <!-- m页面导航-->
            <ul class="pager visible-xs visible-sm">
                <li v-if="pages.last < pages.current_page && pages.last>0" class="previous">
                    <a v-on:click="get_files(pages.last, keyword)" class="osr-pointer">
                        {{_("上一页")}}
                    </a>
                </li>
                <li v-if="pages.next > pages.current_page  && pages.next<=pages.page_total" class="next">
                    <a v-on:click="get_files(pages.next, keyword)" class="osr-pointer">{{_("下一页")}}</a>
                </li>

            </ul>
            <!-- //m页面导航-->
            </div>
        </div>
    </div>
</div>
<script>

    var vue = new Vue({
      el: '#app',
      delimiters:['{[', ']}'],
      data:{
            type:"all",
            files:[],
            keyword:"",
            search_cnt:0,
            del_filename:"",
            del_file_path:"",
            confirm_filename:"",
            page:1,
            pages:{},
            type_list:{
                '{{_("所有文件")}}':"all",
                '{{_("自带文件")}}':"default",
                '{{_("自定义文件")}}':"custom"
               },
            }
    })

    // 加载完页面执行
    $(document).ready(function(){

        var type = $("#type").attr("content");
        vue.type = type?type:vue.type;
        var page = $("#page").attr("content");
        vue.page = page?page:vue.page;
        var keyword = $("#keyword").attr("content");
        vue.keyword = keyword?keyword:vue.keyword
        get_files(vue.page, "");

    })
    function switch_type(value){
        vue.type = value;
        get_files(1, "");
    }
    function get_files(page, keyword){
        vue.page = page;
        vue.keyword = keyword;
        d = {
            keyword:keyword,
            page:page,
            pre:10,
            type:vue.type
        }

       var result = osrHttp("GET","/api/admin/static/file", d, args={not_prompt:true});
       result.then(function (r) {
            vue.files = r.data.files;
            if(vue.keyword){
                vue.search_cnt = 1;
            }
            vue.pages = paging(page_total=vue.files.page_total,
                                current_page=vue.files.current_page);

       });

        var url = window.location.pathname+"?type="+vue.type+"&page="+page;
        if(vue.keyword){
            url = url + "&keyword="+vue.keyword;
        }
        history_state(title=null,url=url);
    }

    function del_file(path, filename){
        d = {
            file_path:path,
            filename:filename
        }
        if(vue.confirm_filename == vue.del_filename){
             var result = osrHttp("DELETE","/api/admin/theme/page", d);
             result.then(function (r) {
                if(r.data.msg_type=="s"){
                    get_files(vue.page, "");
                }
             });

        }else{
            alert("确认失败!");
        }

    }

</script>
{% endblock %}